<template>

    <template v-if="user">
        <div class="center">
            <div>
                <img :alt="user.username" class="img" :src="user.avatar ? user.avatar :defaultPicture ">
            </div>
        </div>
        <van-cell title="当前用户" :value="user.username" size="large" />
        <van-cell title="性别" :value="user.gender = user.gender == 0 ? '男' : '女'" />
        <van-cell title="简介" :value="user.profile = user.profile !== null ? user.profile : '此人很懒，未写简介'"   />
        <van-cell title="邮箱" :value="user.email = user.email !== null ? user.email : '暂无'"   />
        <van-cell title="电话" :value="user.phone = user.phone !== null ? user.phone : '暂无'"   />

<!--        {{user}}-->
        <div style="margin: 16px;" v-if="!flag" >
            <van-button round block type="primary" native-type="submit" @click="doApplyAddUser(user.id,user.username)">
                添加好友
            </van-button>
        </div>

        <div style="margin: 16px;" v-if="flag" >
            <van-button round block type="primary" native-type="submit" @click="doDeleteFriend(user.id)">
                删除好友
            </van-button>
        </div>

        <van-dialog v-model:show="showAddApply" :title="'添加' + userName + '为好友'" @confirm="doApply" show-cancel-button>
            <van-field v-model="remark"  placeholder="请输入备注" />
        </van-dialog>
    </template>

</template>

<script setup lang="ts">
    import {useRouter,useRoute} from "vue-router"
    import {onMounted,ref} from 'vue'
    import myAxois from "../plugin/MyAxios";
    import {showFailToast, showSuccessToast} from "vant";
    import {defaultPicture} from '../common/userCommand';
    import {getCurrentUser} from "../service/user";
    import {a} from "vite/dist/node/types.d-aGj9QkWt";

    const router = useRouter();
    const route = useRoute();

    const fromId = route.query.id;
    const flag = ref<boolean>(false);

    const user = ref()
    onMounted(async () => {
        //获取当前用户信息
        // const res = await getCurrentUser();
        // if(res.data.code === 0 && res.data.data){
        //     showSuccessToast("获取当前用户成功！")
        //     user.value = res.data.data;
        // }else{
        //     showFailToast("获取当前用户失败!")
        // }

        const resp = await myAxois.post(`/user/show/select/${fromId}`);
        if(resp.data.code === 0){
            user.value = resp.data.data;
        }else{
            showFailToast("获取失败")
        }

        const response = await myAxois.post(`/user/is/friend/${fromId}`);
        if(response.data.code === 0){
            flag.value = response.data.data;
        }else{
            showFailToast("判断失败")
        }
    })
    //定义备注变量
    const showAddApply = ref<boolean>(false)
    const remark = ref('');
    const userName = ref('');

    const userId = ref<number>(0);
    const doApplyAddUser = (id:number,username:string) =>{
        showAddApply.value = true;
        userName.value = username;
        userId.value = id
    }

    //向后端发送申请的请求
    const doApply =async (id:number) =>{
        const res = await myAxois.post("/friend/apply",{
            receiveId: userId.value,
            remark: remark.value
        })
        if(res.data.code === 0){
            showSuccessToast("发送成功")
        }else{
            showFailToast(res.data.msg)
        }
    }

    const doDeleteFriend = async (id:number) =>{
        const res = await myAxois.post(`/friend/delete/${id}`);
        if(res.data.code === 0){
            showSuccessToast("删除成功");
            router.back();
        }
        else{
            showFailToast("删除失败");
        }
    }

</script>

<style scoped>
.img{
    box-shadow: 0 0 14px rgba(0, 0, 0, 0.5);
    border-radius: 20%;
    height: 135px;
    width: 135px;
}
.center{
    margin-top: 10px;
    display: flex;
    justify-content: center;
}
</style>